<template>
  <a-card>
    <template #title>
      <div class="section-title">
        <span>委案完成</span>
        <a-tag color="warning">等待中</a-tag>
      </div>
    </template>

    <!-- 委案客户列表 -->
    <div class="entrusted-customer-list">
      <h4>委案客户列表</h4>
      <a-table 
        :columns="entrustedCustomerTableColumns" 
        :dataSource="entrustedCustomerList" 
        :pagination="false"
        :scroll="{ y: 400 }"
        size="small"
        bordered
      />
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

// 定义属性
defineProps<{
  entrustedCustomerList: any[];
}>();

// 委案客户表格列配置
const entrustedCustomerTableColumns = [
  {
    title: '客户ID',
    dataIndex: 'customerId',
    key: 'customerId',
    width: 120,
    ellipsis: true
  },
  {
    title: '客户姓名',
    dataIndex: 'customerName',
    key: 'customerName',
    width: 120,
    ellipsis: true
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    width: 120,
    ellipsis: true
  },
  {
    title: '身份证号',
    dataIndex: 'idCard',
    key: 'idCard',
    width: 150,
    ellipsis: true
  },
  {
    title: '贷款金额',
    dataIndex: 'loanAmount',
    key: 'loanAmount',
    width: 100,
    ellipsis: true
  },
  {
    title: '逾期天数',
    dataIndex: 'overdueDays',
    key: 'overdueDays',
    width: 100,
    ellipsis: true
  },
  {
    title: '委案状态',
    dataIndex: 'entrustStatus',
    key: 'entrustStatus',
    width: 100,
    ellipsis: true
  },
  {
    title: '委案时间',
    dataIndex: 'entrustTime',
    key: 'entrustTime',
    width: 150,
    ellipsis: true
  }
];
</script>

<style scoped>
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entrusted-customer-list h4 {
  margin-bottom: 16px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 500;
}
</style>
